<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta author="Rocky">
	<script type="text/javascript">
		window.onscroll = window_scroll;

		function get_window_position () {
			//below is for compatablle mode.
			var supportPageOffset = window.pageYOffset !== undefined;//if explore support pageYOffset, then use it.

			var isCSS1Compat = (( document.compatMode || "" ) === "CSS1Compat");//compatMode: 'CSS1Compat' or 'BackCompat'(Standards-compliant mode is on or not).

			var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;//get y(select one method).

			return y;

		}

		function window_scroll () {

			var y = get_window_position();
			// var y = document.documentElement.scrollTop;
			// var y = window.pageYOffset;


			if (y > 150) {

				document.getElementById("fixed_top").style.position = "fixed";

				//method 1, marginTop.
				document.getElementById("fixed_top").style.marginTop = '0';

				document.getElementById("fixed_top").style.top = '0';

			}

			if (y <= 150) {

				if (document.getElementById("fixed_top").style.position == "fixed") {

					document.getElementById("fixed_top").style.position = "relative";

					//method 2, ['margin-top']
					document.getElementById("fixed_top").style['margin-top'] = '12px';

				}

			}

		}
	</script>
	<style type="text/css">
		body, div {
			margin: 0;
			padding:  0;
		}

		.fixed_top {
			margin: 12px 0;
			z-index: 199;
		}

		.test-full-div {
			height: 2000px;
			width: 845px;
			background-color: #DDD;
			font-size: 10em;
		}


	</style>
</head>
<body>
	<div class="fixed_top" id="fixed_top">

		<img src="image/banner-nt.png" border="0" alt="天猫">

	</div>

	<div class="test-full-div">
		test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
	</div>
</body>
</html>